<template>
	<div class="addSort">
		<div class="navBar">
			<div>
				<span class="type">所有分类：</span>
				<slot name="search"></slot>
			</div>
			<div class="navBar-item">
				<el-button @click="$emit('updateItems',addItems)" size="mini" type="primary">{{addName}}</el-button>
			</div>
		</div>
		<div :class="{'visible':visible}" :style="style" class="drawer" id="drawer">
			<slot name="type"></slot>
		</div>
		<i :class="!visible?'el-icon-arrow-up':'el-icon-arrow-down'" @click="$emit('update:visible', !visible)" class="sortIcon" v-if="control"></i>
	</div>
</template>
<script>

export default ({
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    control: {
      type: Boolean,
      default: true
    },
    addName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showIcon: true,
      maxHeight: 0,
      addItems: true
    }
  },
  computed: {
    style() {
      const obj = this.maxHeight ? { maxHeight: this.maxHeight } : {}
      return {
        ...obj
      }
    }
  },
  mounted() {
    this.getHeight()
  },
  methods: {
    getHeight() {
      const height = document.getElementById('drawer').offsetHeight
      this.maxHeight = height + 'px'
    }
  }
})
</script>
<style  lang="scss" scoped>
.addSort {
	position: relative;
	border-radius: 10px;
	margin: 20px 100px 20px 20px;
	.navBar {
		display: flex;
		color: #fff;
		justify-content: space-between;
		.el-input {
			width: 260px;
			padding: 8px;
		}
	}
	.drawer {
		transition: all 0.3s;
		overflow: hidden;
		&.visible {
			max-height: 0 !important;
		}
	}
	.type {
		display: inline-block;
		width: 100px;
		text-align: right;
	}
	.sortIcon {
		color: #fff;
		font-size: 26px;
		display: flex;
		justify-content: end;
		cursor: pointer;
	}
}
</style>
